import React, { FC, useEffect, useState } from 'react'
import noDataUrl from '@/assets/images/common_empty.png'
import Header from '@/components/home/header'
import { useNavigate } from 'react-router-dom'
import OrderHeader from '@/components/orderList/header'
import OrderPageList from '@/components/goods/orderGoodsList'
import Empty from '@/components/orderList/empty'
import { getOrderList } from '@/api/orderList'
import { EOrderParamType, Order, OrderData, OrderFilter } from '@/types/orderList'
import { TopSelect, TopButtonSelect } from '@/components/orderList/topSelect'
import { XBusinesslineId } from '@/constants'
import Loading from '@/components/home/loading/saleLoading'
import { Mask } from 'antd-mobile'
const orderPage: FC<{}> = () => {
  const navigate = useNavigate()
  /**页面分页状态 */
  const [resData, setResData] = useState<OrderData | null>(null)
  const [filterNum, setFilterNum] = useState<number>(1)
  const [curpage, setCurpage] = useState<number>(1)
  const [perpage, setPerpage] = useState<number>(5)
  const [orderParamType, setOrderParamType] = useState<EOrderParamType>(EOrderParamType.all)
  const iniOrderListData = () => {
    getOrderList({
      curpage: curpage,
      perpage: perpage,
      filterNum: filterNum,
      type: orderParamType,
      'X-Businessline-Id': XBusinesslineId,
    }).then((res) => {
      setResData(res.data)
      //页面选择数据
      const orderListFilter = res.data.orderListFilter
      setOrderListFilter(orderListFilter)
      // if (orderListFilter.length > 0) {
      //   // setDisplayName(orderListFilter[0].displayName)
      //   // setFilterNum(orderListFilter[0].filterNum)
      // }
      setOrderList(res.data.list)
      setLoading(false)
    })
  }
  useEffect(() => {
    setLoading(true)
    iniOrderListData()
  }, [orderParamType, filterNum])

  /** 页面状态 */
  const [loading, setLoading] = useState(false)
  const [displayName, setDisplayName] = useState<string>('近一年')
  /**显示右上 */
  const [showTop, setShowTop] = useState(false)
  /** 页面数据*/
  const [orderListFilter, setOrderListFilter] = useState<OrderFilter[]>([])
  const [orderList, setOrderList] = useState<Array<Order>>([])

  return (
    <div className="w-full h-full   bg-gray-F7F7F8 ">
      <Mask visible={showTop} onMaskClick={() => setShowTop(false)}></Mask>
      <Header
        cb={() => {
          navigate(-1)
        }}
        headerText={'我的订单'}
        rightNode={
          <TopSelect
            selectName={displayName}
            show={showTop}
            callBack={(status) => {
              setShowTop(status)
            }}
          ></TopSelect>
        }
      >
        {showTop ? (
          <TopButtonSelect
            selectfilterNum={filterNum}
            callBack={(num, name) => {
              setShowTop(false)
              setFilterNum(num)
              setDisplayName(name)
            }}
            orderListFilter={orderListFilter}
          ></TopButtonSelect>
        ) : null}
      </Header>
      <OrderHeader
        callBack={(type: EOrderParamType) => {
          setOrderParamType(type)
          // iniOrderListData()
        }}
      ></OrderHeader>
      {loading ? <Loading noBorder={true} modal={true}></Loading> : null}

      <div className="  pl-r2.2 pr-r1.2 relative  font-regular font-normal text-r1.2 text-orange-FF9D00 bg-orange-FFF5E8 h-r2.9 leading-r2.9">
        <span>
          <i className="iconfont icon-icon_state_warning  text-r1.2 mr-r0.5"></i>
        </span>
        <span>如需进行退调课，请下载希望学APP</span>
      </div>

      {orderList.map((val, key) => {
        return <OrderPageList key={key} order={val} status={val.status}></OrderPageList>
      })}
      {resData && resData.total / resData.perpage > resData.curpage ? (
        <div className=" text-center w-full ">
          <span
            onClick={async () => {
              if (resData && resData.total / resData.perpage > resData.curpage) {
                setLoading(true)
                setCurpage(curpage + 1)
                getOrderList({
                  curpage: curpage + 1,
                  perpage: perpage,
                  filterNum: filterNum,
                  type: orderParamType,
                  'X-Businessline-Id': XBusinesslineId,
                }).then((res) => {
                  setOrderList(orderList.concat(res.data.list))
                  setLoading(false)
                })
              }
            }}
            className=" inline-block text-r1.6 text-gray-999999 text-center cursor-pointer "
          >
            点击加载更多
          </span>
        </div>
      ) : null}

      {orderList.length === 0 ? <Empty></Empty> : null}
    </div>
  )
}

export default orderPage
